<template>
	<view>
<!-- 		<view style="margin-top: 10rpx;">
			<u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
		</view> -->
		

		<!-- 展示详情 -->
		<view>
			<view v-for="(item, index) in travelNodeList">
				<!-- <uni-section :title="item.travelNodeName" type="line"></uni-section> -->
				<u-card :title="item.title" :sub-title="subTitle" :thumb="thumb" :show-head="false">
						<view class="" slot="body" @click="toWebView(item)">
							<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
								<view class="left_img">
									<image :src="item.images"></image>
								</view>
								<view class="u-body-item-title u-line-2">{{item.title}}</view>
							</view>
	<!-- 						<view class="u-body-item u-flex u-row-between u-p-b-0">
								<view class="u-body-item-title u-line-2">釉色渲染仕女图韵味被私藏，而你嫣然的一笑如含苞待放</view>
								<view class="left_img">
									<image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg"></image>
								</view>
							</view> -->
						</view>
						<!-- <view class="" slot="foot"><u-icon name="chat-fill" size="34" color="" label="30评论"></u-icon></view> -->
					</u-card>
				</view>
		</view>
	</view>
	
</template>

<script>
	import { getTravel,getTravelById } from "@/api/travelguides/travel.js";
	  import { getArticle,getCarousel } from "@/api/article/article.js";
	import config from '@/config';
	
	export default {
		data() {
			return {
				title: '素胚勾勒出青花，笔锋浓转淡',
				subTitle: '2020-05-15',
				thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				list: [
						{
							name: '景区名称'
						}, 
						{
							name: '线路推荐'
						}, 
						{
							name: '日程安排'
						}
					],
					curNow: 0,
					jdshow: false,
					ztshow: false,
					rcshow: false,
					sellist: [
						{
							value: '1',
							label: '江'
						},
						{
							value: '2',
							label: '湖'
						}
					],
					ztlist: [],
					rclist: [],
					jdvalue: '',
					ztvalue: '',
					rcvalue: '',
					type: 'text',
					border: true,
					contentShow: false,
					travelNodeList:[]
			};
		},
		onLoad() {
			this.getList();
		},
		methods: {
			toWebView(url) {
			  // console.log(url.staticUrl);
			  // url.staticUrl="www.baidu.com"
			  var url = url;
			  // this.$tab.navigateTo(`/pages/common/webview/index?title="aaa"&url=${url.staticUrl}`)
			   	uni.navigateTo({
			   		// 此处的链接为小程序上面新建的webview页面路径，参数url为要跳转外链的地址
			   		url: "/pages/webview/index?url=" + encodeURIComponent(url.staticUrl)+'&title='+"反诈宣传"
			   	});
			},
				addRandomData() {
					
					let data={pageNum:1,pageSize:10};
					getTravel(data).then(response => {
								  let listData=response.data.records;
								  // 使用for...of循环遍历对象数组
								  for (let obj of listData) {
									  let travel={};
									  obj.vedio=config.minioUrl+'/'+obj.vedio;
									  
								  }
								console.log(listData);
								this.ztlist=listData;
									
					})
				},
				loadRcData() {
					
					let data={pageNum:1,pageSize:10};
					getTravel(data).then(response => {
								  let listData=response.data.records;
								  // 使用for...of循环遍历对象数组
								  for (let obj of listData) {
									  let travel={};
									  travel.value=obj.id;
									  travel.label=obj.travelGuidesName;
									  this.rclist.push(travel);
								  }
								console.log(this.rclist);
									
					})
				},
				sectionChange(index) {
					this.curNow = index;
					switch (index) {
						case 0:
							this.type = 'text';
							this.border = true;
							break;
						case 1:
							this.type = 'text';
							this.border = true;
							break;
						case 2:
							this.rclist=[];
							this.loadRcData();
							break;
						}
					
					
					
				},
				// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
				jdconfirm(e) {
					this.jdvalue=e[0].label;
					console.log(e[0].label);
					this.show=false;
				},
				ztconfirm(e) {
					this.ztvalue=e[0].label;
					console.log(e[0].label);
					this.show=false;
				},
				rcconfirm(e) {
					this.rcvalue=e[0].label;
					getTravelById(e[0].value).then(response => {
						this.contentShow=true;
						this.travelNodeList=response.data.travelNodeList;
							console.log(response.data)	
					})
					this.show=false;
				},
				getList() {
					let data={pageNum:1,pageSize:10};
					getArticle(data).then(response => {
						// console.log(response);
						this.travelNodeList=response.rows;
						console.log(this.travelNodeList)
					})
					
					// this.rcvalue=e[0].label;
					// getTravelById(e[0].value).then(response => {
					// 	this.contentShow=true;
					// 	this.travelNodeList=response.data.travelNodeList;
					// 		console.log(response.data)	
					// })
					// this.show=false;
				}

		}
	}
</script>

<style lang="scss">
	.left_img{
		width: 150rpx;
		height: 150rpx;
		float: left;
		/* border-radius: 8rpx; */
		box-shadow: 0 4rpx 8rpx 0 rgba(0,0,0,0.2);
		transition: 0.3s;
		border-radius: 5rpx;
		margin: 20rpx;
		image{
			width: 150rpx;
			height: 150rpx;
		}
	}
	.xxtext{
		background-color: aqua;
		font-size: 50rpx;
		
	}

</style>
